<template>
  <div id="up">
    <!-- 将数据对象中的lable值最为最终选中的值 :props="{ value: 'label' }"-->
    <el-cascader-panel
      @change="pcaChange"
      :props="{ value: 'label' }"
      v-model="pcaData"
      :options="regionData"
    ></el-cascader-panel>
    <div class="formDivParent">
      <div class="formDiv">
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-form-item size="small" label="确诊" prop="confirmed">
            <el-input min="0" type="number" v-model="form.confirmed"></el-input>
          </el-form-item>
          <el-form-item size="small" label="疑似" prop="suspected">
            <el-input min="0" type="number" v-model="form.suspected"></el-input>
          </el-form-item>
          <el-form-item size="small" label="死亡" prop="dead">
            <el-input min="0" type="number" v-model="form.dead"></el-input>
          </el-form-item>
          <el-form-item size="small" label="治愈" prop="cure">
            <el-input min="0" type="number" v-model="form.cure"></el-input>
          </el-form-item>
          <el-form-item size="small" label="重症" prop="severe">
            <el-input min="0" type="number" v-model="form.severe"></el-input>
          </el-form-item>
          <el-form-item size="small" label="境外输入" prop="outside">
            <el-input min="0" type="number" v-model="form.outside"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >上报</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="tipDiv">
        温馨提示：
        <br />
        1. 选中城市
        <br />
        2. 录入数据
        <br />
        疫情防控，众志成城
        <br />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "../../utils/request";
// let moment = require("moment");
import moment from "moment";

import { regionData } from "element-china-area-data";
export default {
  data() {
    return {
      pcaData: "",
      regionData,
      form: {
        country: "中国",
        province: "",
        city: "",
        area: "",
        confirmed: "",
        suspected: "",
        dead: "",
        cure: "",
        severe: "",
        outside: "",
      },
      rules: {
        confirmed: [
          { required: true, message: "请输入正确的确诊数量", trigger: "blur" },
        ],
        suspected: [
          { required: true, message: "请输入正确的疑似数量", trigger: "blur" },
        ],
        dead: [
          { required: true, message: "请输入正确的死亡数量", trigger: "blur" },
        ],
        cure: [
          { required: true, message: "请输入正确的治愈数量", trigger: "blur" },
        ],
        severe: [
          { required: true, message: "请输入正确的重症数量", trigger: "blur" },
        ],
        outside: [
          { required: true, message: "请输入正确的境外数量", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},

  methods: {
    moment,
    //上报
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        // 验证省市区数据
        if (this.pcaData.length == 0) {
          // 表示不判断表单验证，后面代码不会执行
          this.$notify({
            title: "提示",
            message: "请选择省市区",
            type: "warning",
          });
          return;
        }
        if (valid) {
          // 保存或更新

          let res = await axios.post("/epidemic/saveOrUpdate", this.form);
          this.$notify({
            title: res.status == 200 ? "成功" : "失败",
            message: "res.statusText",
            type: res.status == 200 ? "success" : "error",
          });
          //   清空form
          this.form = {};
          this.pcaData = [];
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async pcaChange(val) {
      // console.log(val, "-=-=-=-=-=-=-=-=-=-==-=-=-=-=");
      // 找该省市区当天的数据，如果有数据，在表单中做填充。如果没有数据，表单清空，做新增操作。
      let res = await axios.get("/epidemic/pageQuery", {
        params: {
          page: 1,
          pageSize: 10,
          province: val[0],
          city: val[1],
          area: val[2],
          inputTime: moment(new Date()).format("YYYY-MM-DD"),
        },
      });
      this.form = {
        country: "中国",
        province: val[0],
        city: val[1],
        area: val[2],
        confirmed: "",
        suspected: "",
        dead: "",
        cure: "",
        severe: "",
        outside: "",
      };
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped>
/* BFC 块级格式化上下文 */
.formDivParent {
  /* 清除子元素浮动对父元素产生的影响 */
  overflow: hidden;
  margin-top: 20px;
}
.formDiv {
  float: left;
  width: 50%;
}
.tipDiv {
  float: left;
  color: red;
  margin-left: 20px;
  font-size: 10px;
  line-height: 20px;
}
</style>
